<template>
	<view class="swiper">
		<swiper class="swiper-box" :autoplay="true" :current="currentIndex" interval="3000" :circular="true" previous-margin="30rpx"
		 next-margin="30rpx" :indicator-dots="true" indicator-color="gray" indicator-active-color="#ffffff"  @change="changeCurrent">
			<swiper-item class="s-b-item" v-for="(item,index) in list" :key="index"  @tap="click(item)" :data-id="item.id"  :class="currentIndex===index ? 'current-item' : 'no-item'">
				<image :src="item.image" ></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		name:'m-swiper',
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				currentIndex:0
			}
		},
		mounted(){

		},
		methods:{
			changeCurrent(e){
				this.currentIndex=e.detail.current
			},
			click(item){
				// this.$router.push({
				// 	route:this.$routesConfig.bannerDetail,
				// 	query:{id:item.id}
				// })
			}
		}
	}
</script>

<style scoped lang="less" >
	.swiper{
		width: 100%;
		.swiper-box{
			width: 100%;
			height: 300rpx;
			.s-b-item{
				// width: 80%;
				padding: 0  20rpx;
				box-sizing: border-box;
				transition: padding 0.5s;

				image{
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 30rpx;
				}
			}
			.current-item{
				height: 300rpx;
			}
			.no-item{
				padding: 20rpx 0;
			}
		}
	}
</style>
